<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=tLfmkn3SLUPSEPNKAn83pApq0bg5sziI"></script>

		<style type="text/css">
			.swiper-container-teacher{
				width: 100%;
				height: 12rem;
			}
			.major-box{
				margin: 0.625rem 0.625rem;
				padding: 0.625rem 0.6125rem;
				background-color: white;
				border-radius: 0.625rem;
			}
			.major-box p{
				text-indent: 2em;
				margin-bottom: 0.625rem;
			}
			.major-box .title{
				display: inline-block;
				font-weight: bold;
				border-right: 0.3125rem solid #01eabb;
				padding-right: 0.25rem;
				margin-bottom: 0.625rem;
			}
			.major-box .describe>div{
				font-size: 0.875rem;
				margin-bottom: 0.5rem;
			}
			.swiper-tese{
				margin-top: 0.625rem;
				margin-bottom: 0.625rem;
				height: 14rem;
				border-radius: 0.625rem;
			}
			.swiper-tese .swiper-slide{
				position: relative;
			}
			.swiper-tese .content{
				position: absolute;
				bottom: 0rem;
				padding: 6px;
				color: white;
				width: 100%;
				background: rgba(0,0,200,0.5);
				left: 0rem;
			}
			.swiper-tese .content span{
				color: #007AFF;
			}
			.major-box .zongzhi{
				display: flex;
				justify-content: space-around;
			}
			.major-box .zongzhi img{
				width: 22%;
			}
			/* 重写轮播图中的分页器 */
			.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
				width: unset;/*此宽度要根据轮播图的个数进行动态修改*/
				right: 3.125rem;
				left: unset;
			}
			.swiper-pagination-bullet{
				background-color: white;
				opacity: 1;
				border-radius: unset;
			}
			.swiper-pagination-bullet-active{
				background-color: orangered;
			}
			.tab-nav{
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 0.325rem;
			}
			.tab-nav>div{
				padding: 0.625rem 0.375rem;
				background-color: white;
				font-size: 0.875rem;
				text-align: center;
			}
			.tab-nav>div~div{
				margin-left: 0.325rem;
			}
			.tab-nav img{
				width: 20%;
				vertical-align: middle;
			}
			.news-box{
				padding: 0.625rem;
				display: flex;
				justify-content: space-between;
			}
			.news-box>div{
				flex: 1;
			}
			.news-box img{
				width: 100%;
				height: 4.375rem;
				border-radius: 0.625rem;
			}
			.news-box>div>div{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp:1;
				overflow: hidden;
			}
			.news-box>div~div{
				margin-left: 0.625rem;
			}
			.news-item{
				display: flex;
				padding: 0.625rem;
				padding-bottom: 1.25rem;
				padding-top: 1.25rem;
				border-bottom: 0.0625rem solid #ccc;
				background-color: white;
			}
			.news-item img{
				width: 40%;
				height: 6.125rem;
				margin-right: 0.625rem;
				border-radius: 0.625rem;
			}
			.news-item .title{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp:2;
				overflow: hidden;
				font-size: 0.875rem;
				font-weight: bold;
			}
			.news-item .date,.news-item .describe{
				color: #ccc;
				margin-top: 0.325rem;
				font-size: 0.75rem;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp:3;
				overflow: hidden;
			}
			#newsBox .news-item,.news-box a,.swiper-slide a{
				color: #111;
			}
			#pullmore{
				text-align: center;
				color: #ccc;
			}
			.fixorno{
				position: fixed;
				width: 100%;
				bottom: 0px;
			}
		</style>
	</head>
	<body>
	<header>
		<div class="logo-box">
			<div class="logo-name"></div>
			<div class="slogan"></div>
		</div>
		<div class="logo-img">
			<img src="/home/img/true.jpg" >
		</div>
	</header>
		<div class="navbar-box">
			<ul class="navbar">
				<li><a href="/index.html">首页</a></li>
				<li><a href="jianjie.html">简介</a></li>
				<li><a href="major.html">专业</a></li>
				<li><a href="shizi.html">师资</a></li>
				<li><a href="huanjing.html">环境</a></li>
				<li><a href="jiuye.html">就业</a></li>
				<li><a href="xinwen.html"  class="active">新闻</a></li>
				<li><a href="wenda.html">问答</a></li>
			</ul>
		</div>
		<div class="swiper-container" id="lunbo">
		  <div class="swiper-wrapper">
		    <!-- <div class="swiper-slide"><img src="http://www.cqzuxia.com/statics/zuxia20/images/banner5.jpg" ></div>
		    <div class="swiper-slide"><img src="http://www.cqzuxia.com/statics/zuxia20/images/banner6.jpg" ></div>
		    <div class="swiper-slide"><img src="http://www.cqzuxia.com/statics/zuxia20/images/banner7.jpg" ></div> -->
		  </div>
		  <!-- Add Arrows -->
		 <!-- <div class="swiper-button-next"></div>
		  <div class="swiper-button-prev"></div> -->
		</div>
		<div class="tab-nav">
			<!-- <div>
				<img src="img/xinwen.png" alt="">
				<b>学校新闻</b>
			</div> -->
		</div>
		<div style="padding: 0.025rem 0.375rem;background-color: white;margin-top: 0.375rem;">
			<div class="swiper-container swiper-tese">
			  <div class="swiper-wrapper">
			   <!-- <div class="swiper-slide">
						<img src="http://www.cqzuxia.com/statics/zuxia20/images/banner4.jpg" >
						<div class="content">
							<div class="describe">入学即签订就业协议</div>
						</div>
					</div> -->
<!-- 			    <div class="swiper-slide">
						<img src="http://www.cqzuxia.com/statics/zuxia20/images/banner2.jpg" >
						<div class="content">
							<div class="describe">为学员提供终身就业服务</div>
						</div>
					</div>
			    <div class="swiper-slide">
						<img src="http://www.cqzuxia.com/statics/zuxia20/images/banner3.jpg" >
						<div class="content">
							<div class="describe">换工作及岗位提升+人才外派+猎</div>
						</div>
					</div> -->
			  </div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>
			</div>
		</div>
	<div class="news-box">
		<!-- <div>
            <img src="http://www.cqzuxia.com/uploads/allimg/201012/094301MW-0.jpg" alt="">
            <div>软件学院学子用编程语言花式祝福祖国</div>
        </div> -->
	</div>
		<div style="margin-top: 0.625rem;" id="newsBox">
			<!-- <a class="news-item">
				<img src="http://www.cqzuxia.com/uploads/allimg/200623/1GIH195-0.jpg" alt="">
				<div>
					<div class="title">5G时代的到来，为什么越来越多的人入行新媒体</div>
					<div class="date">日期：2020-11-18</div>
					<div class="describe">新媒体社交网络的蓬勃发展是互联网时代的一个里程碑，不管是新浪微博，微信，还是其他社交平台，都极大的改变了人们的生活形态，将我们带入了一个社交网络的时代。</div>
				</div>
			</a> -->
		</div>
		<div id="pullmore">
			查看更多
		</div>
		<style type="text/css">
			.major-box .lianxi{
				width: 4.25rem;
				text-align: center;
				font-weight: bold;
				border-bottom: 0.3125rem solid #01eabb;
				padding-bottom: 0.25rem;
				margin-bottom: 0.625rem;
			}
			#map{
				height: 12.5rem;
			}
			.info-box img{
				width: 1rem;
				margin-right: 0.625rem;
			}
		</style>
		<!-- <div class="major-box">
			<div class="lianxi">联系我们</div>
			<div id="map"></div>
			<div class="info-box">
				<div class="tel"><img src="img/duanxin.png">400-6655-720</div>
				<div class="msg"><img src="img/phone.png" >020-13587458</div>
				<div class="position"><img src="img/position.png" >湖南省株洲市天元区</div>
			</div>
		</div> -->
	<footer>
		<div class="" style="padding: 0rem 0.625rem;">
			<div id="address"></div>
			<div><img src="" id="qrcode" ></div>
		</div>
		<div id="beian" style="text-align: center;font-size: 0.75rem;display: block;color: #ccc;"></div>
	</footer>
		<!-- 底部导航 -->
		<div id="fixBottom">
			<ul>
				<li class="telzixun"><a href="tel:10000" id="tel"><img src="img/tel.png" ><div>电话咨询</div></a></li>
				<!-- <li class="baoming"><a href="tencent://message/?uin=1014167202&Site=在线QQ&Menu=yes"><img src="img/msg.png"><div>在线报名</div></a></li> -->
				<li class="baoming"><a href="leavemsg.html"><img src="img/msg.png"><div>在线报名</div></a></li>
				<li class="feezixun"><a href="chat.html"><img src="img/qq.png" ><div>报名咨询</div></a></li>
				<li class="feezixun"><a href="chat.html"><img src="img/fee.png" ><div>学费咨询</div></a></li>
				<!-- <li class="qqzixin"><a href="https://wpa1.qq.com/JEFqRGvh?_type=wpa&qidian=true"><img src="img/qq.png" ><div>QQ咨询</div></a></li>
				<li class="feezixun"><a href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img src="img/fee.png" ><div>学费咨询</div></a></li> -->
			</ul>
		</div>
	</body>
	<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
	<script>
	// 网页轮播
	getLunbo("xinwen");
	</script>

	<script type="text/javascript">
	var newsType;	// 当前新闻分类id
	var page=0,limit=10;
	
	function tabNews(id){
		newsType=id;
		page=0;
		shuaxin();
	}
	function getMore () {
		page++;
		$.ajax({
			url:`/h5/newspage`,
			data:{"page":page,"limit":limit,"newstype":newsType},
			success:function(res){
				if(res.code==200){
					if(res.data.length>0){
						for (var i = 0; i < res.data.length; i++) {
							let reg = /src=\"\/upload\//g;
							// let tmp = res.data[i].nscontent.replace(reg, `src=\"/upload/`)
							let tmp = res.data[i].nscontent.replace(reg, `aa`)
							let s=`<a class="news-item" href="xinwendetail.html?nsid=${res.data[i].nsid}">
								<img src="/upload/${res.data[i].nsimg}" alt="">
								<div>
									<div class="title">${res.data[i].nstitle}</div>
									<div class="date">日期：${res.data[i].nstime}</div>
									<div class="describe">${tmp}</div>
								</div>
							</a>`;
							$("#newsBox").append(s);
						}
					}else{
						$(document).off("scroll")
						$("#pullmore").html("没有数据了")	;
					}
				}
			}
		})
	}
	$("#pullmore").click(function(){
		getMore();
	})
		// 查询新闻分类
		$.ajax({
			url:`/h5/getnewstype`,
			async:false,		// 同步
			success:function(res){
				if(res.code==200){
					newsType = res.data[0].id;
					for (var i = 0; i < res.data.length; i++) {
						let s=`<div onclick="tabNews('${res.data[i].id}')">
									<img src="/upload/${res.data[i].xwimg}" alt="">
									<b>${res.data[i].name}</b>
								</div>`;
							$(".tab-nav").append(s);
					}
				}
			}
		})
		shuaxin();
		function shuaxin(){
			$("#newsBox").html("");
			// 查询新闻分类下的新闻
			getMore();
			// 查询新闻分类下的热门新闻
			$(".news-box").html("");
			$.ajax({
				url:`/h5/hotnews`,
				data:{"newstype":newsType},
				async:false,
				success:function(res){
					if(res.code==200){
						for (var i = 0; i < res.data.length; i++) {
							let s=`<div><a href="xinwendetail.html?nsid=${res.data[i].nsid}">
										<img src="/upload/${res.data[i].nsimg}" alt="">
										<div>${res.data[i].nstitle}</a></div>
									</div>`;
							$(".news-box").append(s);
						}
					}
				}
			})
			// 查询新闻分类下的轮播新闻
			$(".swiper-tese .swiper-wrapper").html("");
			$.ajax({
				url:`/h5/lunbonews`,
				data:{"newstype":newsType},
				async:false,
				success:function(res){
					if(res.code==200){
						if(res.data.length>0) {
							$(".swiper-tese").parent().show();
							for (var i = 0; i < res.data.length; i++) {
								let s = ` <div class="swiper-slide"><a href="xinwendetail.html?nsid=${res.data[i].nsid}">
									<img src="/upload/${res.data[i].nsimg}" >
									<div class="content">
										<div class="describe">${res.data[i].nstitle}</div>
									</div></a>
								</div>`;
								$(".swiper-tese .swiper-wrapper").append(s);
							}
							var swiper2 = new Swiper('.swiper-tese', {
								autoplay: true,//可选选项，自动滑动
								loop: true,
								// 如果需要分页器
								pagination: {
									el: '.swiper-pagination',
								},
							});
						}else{
							$(".swiper-tese").parent().hide();
						}
					}
				}
			})
			if(getClientHeight()<500){
				$("footer").addClass('fixorno');
			}else{
				$("footer").removeClass('fixorno');
			}
		}
		
	// 上拉加载
		//获取窗口可视范围的高度
		function getClientHeight(){   
		    var clientHeight=0;   
		    if(document.body.clientHeight&&document.documentElement.clientHeight){   
		         clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;           
		    }else{   
		         clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;       
		    }   
		    return clientHeight;   
		}
		
		function getScrollTop(){   
		    var scrollTop=0;   
		    scrollTop=(document.body.scrollTop>document.documentElement.scrollTop)?document.body.scrollTop:document.documentElement.scrollTop;           
		    return scrollTop;   
		}
		//滚动加载
		function scrollLoad(){
		    //可视窗口的高度
		    var scrollTop = 0;
		    var scrollBottom = 0;
		    $(document).scroll(function(){
		        var dch = getClientHeight();
		        scrollTop = getScrollTop();
		          scrollBottom = document.body.scrollHeight - scrollTop;
		          if(scrollBottom >= dch && scrollBottom <= (dch+10)){     
							getMore();
		            }
		    });
		}
		scrollLoad();
	</script>

</html>
